<template>
  <div class="account">
    <div class="form-wrap">
      <form-list
        ref="formRef"
        layout="vertical"
        :model="formData"
        :rules="formRules"
        @finish="onFinish"
        ><form-item label="用户名" name="username">
          <a-input
            v-model:value="formData.username"
            placeholder="请输入手机号"
          />
        </form-item>
        <form-item label="密码" name="password">
          <a-input
            v-model:value="formData.password"
            placeholder="请输入密码"
            type="password"
          />
        </form-item>
        <form-item>
          <a-button type="primary" class="btn" html-type="submit"
            >登录</a-button
          >
          <a-button class="btn">滑动验证</a-button>
          <a-button class="btn" @click="test">測試</a-button>
          <div class="warn">
            <router-link to="/forget"> 忘记密码 </router-link>
            <router-link to="/register"> 注册 </router-link>
          </div>
        </form-item> 
      </form-list>
    </div>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { defineComponent, reactive, computed, ref, onMounted } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { formRules } from "@/utils/fromRules";
import { Login } from "@/api/account";
// cookies
import { setToken, setUsername, getToken } from "../../utils/cookie";
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
  },

  setup() {
    // 數據
    const formData = reactive({
      username: "",
      password: "",
    });
    const router = useRouter();

    // 方法
    const onFinish = (values) => {
      console.log("Success:", values);
      router.push({
        path: "/home",
      });
      // setToken({ token: data.token });
      // setUsername({ value: data.username });

      // setTimeout(() => {
      //   console.log(getToken());
      // }, 2000);
    };
    const test = async () => {
      const result = await Login(formData);
      console.log(result);
    };
    // 生命週期
    onMounted(() => {});
    // return
    return {
      formData,
      router,
      formRules,
      onFinish,
      test,
    };
  },
});
</script>
<style lang="scss" scoped>
@import "./style.scss";
</style>
